<template>
  <div class="admin">
    <h1>大屏参数设置中心</h1>
    <div class="list">
      <div class="list-item">
        <label>标题</label>
        <input
          type="text"
          v-model="detailData.listLeft1Text"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>跨境电商相关业务数量</label>
        <input
          type="number"
          v-model="detailData.listLeft2Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>跨境电商独立站出口金额</label>
        <input
          type="number"
          v-model="detailData.listLeft3Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>业务占比</label>
        <input
          type="number"
          v-model="detailData.listLeft3Percent"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>外贸企业数量</label>
        <input
          type="number"
          v-model="detailData.listMiddle1Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>出口额</label>
        <input
          type="number"
          v-model="detailData.listMiddle2Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>同比增长</label>
        <input
          type="number"
          v-model="detailData.listMiddle3Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>10亿企业数量</label>
        <input
          type="number"
          v-model="detailData.listMiddle4Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>1亿企业数量</label>
        <input
          type="number"
          v-model="detailData.listMiddle5Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>时间段</label>
        <input
          type="text"
          v-model="detailData.listMiddle5Text"
          placeholder="请输入"
        />
      </div>

      <div class="list-item">
        <label>已集聚服务商数量</label>
        <input
          type="number"
          v-model="detailData.listRight1Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>累计服务企业 </label>
        <input
          type="number"
          v-model="detailData.listRight2Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>跨境出口</label>
        <input
          type="number"
          v-model="detailData.listRight3Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>培训人次</label>
        <input
          type="number"
          v-model="detailData.listRight5Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>培育产业带数量</label>
        <input
          type="number"
          v-model="detailData.listRight6Num"
          placeholder="请输入"
        />
      </div>
      <div class="list-item">
        <label>头部企业数量</label>
        <input
          type="number"
          v-model="detailData.listRight7Num"
          placeholder="请输入"
        />
      </div>
    </div>

    <div class="btn-group">
      <!-- <button @click="getDetailData">获取详情数据</button> -->
      <button @click="saveDetailData">保存数据</button>
    </div>
  </div>
</template>
<script>
import { post } from "../common/request.js";

export default {
  name: "admin",
  data() {
    return {
      detailData: {
        listLeft1Text: "[外贸企业]业务数据看板",
        listLeft2Num: 123,
        listLeft3Num: 57.5,
        listLeft3Percent: 75,
        listMiddle1Num: 190,
        listMiddle2Num: 128.66,
        listMiddle3Num: 16.8,
        listMiddle4Num: 2,
        listMiddle5Num: 13,
        listMiddle5Text: "2024年1-10月",
        listRight1Num: 87,
        listRight2Num: 15000,
        listRight3Num: 100,
        listRight5Num: 1000,
        listRight6Num: 10,
        listRight7Num: 100,
      },
    };
  },
  mounted() {
    // 获取详情数据
    this.getDetailData();
  },
  methods: {
    // 事件处理函数
    async getDetailData() {
      // 获取详情数据
      const res = await post("/api/common/list_data");
      if (res.data) {
        console.log(res.data);
        this.detailData = JSON.parse(res.data[0].data);
      }
    },

    async saveDetailData() {
      //     // 保存详情数据
      await post("/api/common/save_data", {
        id: 1,
        data: JSON.stringify(this.detailData),
      });
      alert('保存成功');
    },
  },
};
</script>

<style lang="scss" scoped>
.admin {
  padding: 20px;
  background-color: #f5f5f5;
  height: 100vh;
  overflow: auto;
  padding-bottom: 80px;
}
h1 {
  text-align: center;
  font-size: 200%;
  padding: 20px 0;
}
.list {
  background-color: #fff;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.list-item {
  margin-bottom: 20px;
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
  }
}
.list-item input {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.btn-group {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  button {
    background: linear-gradient(to bottom, #4c9aff, #2a7ae2);
    color: #fff;
    width: 100%;
    padding: 12px;
    border: none;
    font-size: 20px;
  }
}
</style>
